<template>
  <div>
    <mt-header title="注册" class="header" fixed>
      <router-link to="" slot="left">
        <mt-button icon="back" @click="$router.go(-1)">返回</mt-button>
      </router-link>
    </mt-header>

    <div class="box">
      <div><img src="@/assets/img/user.png" alt="" class="touxiang" /></div>
      <div>
        <span>用户名：</span
        ><input
          type="text"
          placeholder="请输入用户名"
          v-model="name"
          id="userName"
          @focus="userNameFocus"
          @blur="userNameBlur"
        />
        <div id="userNameId" class="sty"></div>
      </div>
      <div>
        <span>密码：</span
        ><input
          type="password"
          placeholder="请输入密码"
          v-model="pwd"
          id="pwd"
          @focus="pwdFocus"
          @blur="pwdBlur"
        />
        <div id="pwdId" class="sty"></div>
      </div>
      <div>
        <span>确认密码：</span
        ><input
          type="password"
          placeholder="请再次输入密码"
          v-model="repwd"
          id="repwd"
          @blur="repwdBlur"
        />
        <div id="repwdId" class="sty"></div>
      </div>
      <div>
        <span>邮箱：</span
        ><input
          type="text"
          placeholder="请输入邮箱"
          id="email"
          v-model="emile"
          @focus="emailFocus"
          @blur="emailBlur"
        />
        <div id="emailId" class="sty"></div>
      </div>
      <div>
        <span>手机号：</span
        ><input
          type="text"
          placeholder="请输入手机号"
          v-model="phone"
          id="tel"
          @focus="telFocus"
          @blur="telBlur"
        />
        <div id="telId" class="sty"></div>
      </div>
      <div class="btn">
        <mt-button
          type="primary"
          :disabled="disable()"
          @click.native.capture="checkForm"
          >注册</mt-button
        >
        <!-- <div id="" class="sty"></div> -->
      </div>
    </div>
  </div>
</template>

<script>import { Toast } from 'mint-ui';
export default {
  
  // let userNameId = document.getElementById("userNameId");
  // let userName=document.getElementById('userName')
  // let pwd=document.getElementById('pwd')
  // let pwdId=document.getElementById('pwdId')
  // let repwd=document.getElementById('repwd')
  // let repwdId=document.getElementById('repwdId')
  // let email=document.getElementById('email')
  // let emailId=document.getElementById('emailId')
  // let tel=document.getElementById('tel')
  // let telId=document.getElementById('telId')
  data() {
    return {
      name: "",
      pwd: "",
      repwd: "",
      emile: "",
      phone: "",
      avatar: "",
    };
  },
  methods: {
    disable() {
      if (this.name != "" && this.pwd != "" && this.repwd != "") {
        return false;
      } else {
        return true;
      }
    },
    // 当鼠标放在用户名文本框时，提示文本及样式
    userNameFocus() {
      // console.log("进来了");
      let userNameId = document.getElementById("userNameId");
      // let userName=document.getElementById('userName')
      userNameId.className = "import_prompt";
      userNameId.innerHTML = "输入6~9位字母";
    },
    //鼠标离开时
    userNameBlur() {
      let userNameId = document.getElementById("userNameId");
      let userName = document.getElementById("userName");
      let reg = /^\w{6,9}$/;
      // 用户名为空时
      if (userName.value.trim() == "") {
        // console.log("空了");
        userNameId.className = "error_prompt";
        userNameId.innerHTML = "用户名不能为空";
        return false;
      }
      // 用户名不合法的情况
      if (reg.test(userName.value.trim()) == false) {
        userNameId.className = "import_prompt";
        userNameId.innerHTML = "不是6~9位字母";
        return false;
      }
      // 输入了正确的格式
      userNameId.className = "ok_prompt";
      userNameId.innerHTML = "用户名输入正确";
      return true;
    },
    /*当鼠标放在密码文本框是，提示文本及样式*/
    pwdFocus() {
      // let pwd=document.getElementById('pwd')
      let pwdId = document.getElementById("pwdId");
      // var pwdId = $("pwdId");
      pwdId.className =
        "import_prompt"; /*卧槽，一次书写，多次调用，本真人跪了！*/
      pwdId.innerHTML = "密码长度为6-12";
    },
    // /*当鼠标离开密码文本框时，提示文本及样式*/
    pwdBlur() {
      let pwd = document.getElementById("pwd");
      let pwdId = document.getElementById("pwdId");
      // var pwd=$("pwd");
      // var pwdId=$("pwdId");
      if (pwd.value.trim() == "") {
        pwdId.className = "error_prompt";
        pwdId.innerHTML = "密码不能为空";
        return false;
      }
      if (pwd.value.length < 6 || pwd.value.length > 12) {
        pwdId.className = "error_prompt";
        pwdId.innerHTML = "密码长度为6-12";
        return false;
      }
      pwdId.className = "ok_prompt";
      pwdId.innerHTML = "密码输入正确";
      return true;
    },
    // repwdFocus(){

    // },
    // 离开验证密码文本框
    repwdBlur() {
      let pwd = document.getElementById("pwd");
      let pwdId = document.getElementById("pwdId");
      let repwd = document.getElementById("repwd");
      let repwdId = document.getElementById("repwdId");
      // var pwd=$("pwd");
      // var repwd=$("repwd");
      // var repwdId=$("repwdId");
      if (repwd.value == "") {
        pwdId.className = "error_prompt";
        pwdId.innerHTML = "重复密码不能为空";
        return false;
      }
      if (pwd.value != repwd.value) {
        repwdId.className = "error_prompt";
        repwdId.innerHTML = "输入的密码不一致";
        return false;
      }
      repwdId.className = "ok_prompt";
      repwdId.innerHTML = "两次密码输入正确";
      return true;
    },
    // 进入邮箱文本框
    emailFocus() {
      // let email=document.getElementById('email')
      let emailId = document.getElementById("emailId");
      // var emailId = $("emailId");
      emailId.className = "import_prompt";
      emailId.innerHTML = "请输入电子邮箱";
    },

    /*当鼠标离开保密邮箱文本框时，提示文本及样式*/
    emailBlur() {
      let email = document.getElementById("email");
      let emailId = document.getElementById("emailId");
      // var email=$("email");
      // var emailId=$("emailId");
      let reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
      if (email.value == "") {
        emailId.className = "error_prompt";
        emailId.innerHTML = "邮箱不能为空";
        return false;
      }
      if (reg.test(email.value) == false) {
        emailId.className = "error_prompt";
        emailId.innerHTML = "邮箱格式不正确";
        return false;
      }
      emailId.className = "ok_prompt";
      emailId.innerHTML = "保密邮箱输入正确";
      return true;
    },
    /*当鼠标放在关联手机号文本框时，提示文本及样式*/
    /*提示都是千篇一律，错误提示是各有不同啊！*/
    telFocus() {
      //  let tel=document.getElementById('tel')
      let telId = document.getElementById("telId");
      // var telId=$("telId");，
      telId.className = "import_prompt";
      telId.innerHTML = "以13,15,18开头";
    },
    /*当鼠标离开关联手机号文本框时，提示文本及样式*/
    telBlur() {
      let tel = document.getElementById("tel");
      let telId = document.getElementById("telId");
      // var tel=$("tel");
      // var telId=$("telId");
      //13,15,18开头就长这德行，加上后面的任意9位，凑成11位，啧啧，每次看正则表达式，本真人都是醉了！
      var reg = /^(13|15|18|19)\d{9}$/;
      if (tel.value == "") {
        telId.className = "error_prompt";
        telId.innerHTML = "手机号码不能为空";
        return false;
      }
      if (reg.test(tel.value) == false) {
        telId.className = "error_prompt";
        telId.innerHTML = "手机号输入不正确";
        return false;
      }
      telId.className = "ok_prompt";
      telId.innerHTML = "手机号码输入正确";
      return true;
    },
    checkForm() {
      // if (this.userName == true) {
      // }
      // console.log(
      //   this.userNameBlur() &&
      //     this.pwdBlur() &&
      //     this.repwdBlur() &&
      //     this.emailBlur() &&
      //     this.telBlur()
      // );
      const { name, pwd, email, phone, avatar } = this; //解构
      if (
        this.userNameBlur() &&
        this.pwdBlur() &&
        this.repwdBlur() &&
        this.emailBlur() &&
        this.telBlur()
      ) {
        let params = `username=${name}&password=${pwd}&email=${email}&phone=${phone}&avatar=${avatar}`;
        this.axios.post("/register", params).then((res) => {
          console.log(res);
          if (res.data.code == 201) {
            
            Toast({
  message: '用户已经存在',
  position: 'bottom',
  duration: 5000
});
          } else {
            Toast({
  message: '注册成功',
  position: 'bottom',
  duration: 5000
})
            this.$router.push("/login");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  top: 0px;
}
.box {
  width: 80vw;
  height: 50vh;
  margin: auto;
  margin-top: 25vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.box > div {
  margin: auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  input,
  span {
    display: inline-block;
    display: flex;
  }
  span {
    width: 30%;
  }
  input {
    width: 70%;
  }
}
button {
  display: inline-block;
  margin: auto;
}
.touxiang {
  background-color: lightgray;
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50px;
}
.sty {
  width: 140px;
}
// 当鼠标放到文本框时，提示的文本样式
.import_prompt {
  border: solid 2px #ffcd00;
  background-color: #ffffda;
  padding: 0 5px;
  line-height: 20px;
  width: 140px;
}
// 当文本框内容不符合要求时
.error_prompt {
  border: 1px solid #f30;
  background-color: #fff2e5;
  line-height: 20px;
  padding: 2px 5px 0 5px;
  width: 140px;
}
// 当文本输入正确时
.ok_prompt {
  border: 1px solid #01be00;
  background-color: #e6fee4;
  padding: 2px 5px 0 5px;
  line-height: 20px;
  width: 140px;
}
</style>